{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static 'front/css/edit.css' %}">
    <script src='{% static "vue.js" %}'></script>
</head>

<body>
    <section id="root" class="root">
        <form action="">

        </form>
        <section class="loading"></section>
        <section class="edit">
            <!-- 录音布局 -->
            <div class="voice-box">
                <div class="voice_edit_box">
                    <p class="edit-title">录制文字 <button class="record_cancel" @click="close_record"><svg
                                t="1642745512788" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1538" width="200" height="200">
                                <path
                                    d="M557.3 512l329.3-329.4a32 32 0 1 0-45.2-45.2L512 466.7 182.6 137.4a32 32 0 1 0-45.2 45.2L466.7 512 137.4 841.4a31.9 31.9 0 0 0 0 45.2 31.9 31.9 0 0 0 45.2 0L512 557.3l329.4 329.3a31.9 31.9 0 0 0 45.2 0 31.9 31.9 0 0 0 0-45.2z"
                                    fill="#515151" p-id="1539"></path>
                            </svg></button><button @click="end_record" class="record_end"><svg t="1642818739979"
                                class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                p-id="2441" width="200" height="200">
                                <path
                                    d="M380.8 749.44 137.6 505.6c-12.8-12.8-12.8-33.92 0-46.72 12.8-12.8 33.92-12.8 46.72 0l227.2 227.84 425.6-421.12c12.8-12.8 33.28-12.8 46.08 0 12.8 12.8 12.8 33.28 0 45.44L441.6 749.44C420.48 769.92 396.8 765.44 380.8 749.44z"
                                    p-id="2442" fill="#515151"></path>
                            </svg></button></p>
                    <audio :src="voice_src" controls="" class="audio-player"></audio>
                    <p class="tishi"><small id="record_tishi"> <br /></small></p>
                    <button class="btn btn-primary record-btn" type="button">录制</button>
                    <button class="btn btn-primary upload" type="button">本地上传<input type="file"
                            class="voice_file"></button>
                </div>

            </div>
            <section class="letters-box">
                <section id="letter_paper_box" class="letter-paper-box jump-letter-paper">
                    <!-- 底部导航栏 -->
                    <div class="edit-nav">
                        <div class="top-nav">
                            <button class="back left" @click="back"><svg t="1642595195376" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733"
                                    width="200" height="200">
                                    <path
                                        d="M874.69 495.525c0 11.297-9.168 20.466-20.466 20.466H249.45l188.084 188.084c7.992 7.992 7.992 20.947 0 28.939a20.445 20.445 0 0 1-14.47 5.996 20.408 20.408 0 0 1-14.48-5.996l-223.008-223.01a20.455 20.455 0 0 1 0-28.94l223.019-223.028c7.992-7.992 20.957-7.992 28.95 0 7.991 8.002 7.991 20.957 0 28.95L249.47 475.058h604.753c11.298 0 20.466 9.158 20.466 20.466z"
                                        p-id="4734"></path>
                                </svg></button>
                            <button class="small_text right" @click="small"> <span>小</span></button>
                            <button class="add_img right"><input type="file" @change="getImg"><svg t="1642646491777"
                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="852" width="200" height="200">
                                    <path
                                        d="M928 192H96c-17.6 0-32 14.4-32 32v576c0 17.6 14.4 32 32 32h832c17.6 0 32-14.4 32-32V224c0-17.6-14.4-32-32-32zM192 416c0-52.8 43.2-96 96-96s96 43.2 96 96-43.2 96-96 96-96-43.2-96-96z m384 288H317.6l128.8-224L520 607.2l128-221.6L832 704H576z"
                                        p-id="853" fill="#515151"></path>
                                </svg></button>
                            <button @click="retract" class="retract right"><svg t="1642646532958" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1206"
                                    width="200" height="200">
                                    <path
                                        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z m-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56z m504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4 0.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1c-4.5 3.5-4.5 10.3 0 13.8z"
                                        p-id="1207" fill="#515151"></path>
                                </svg></button>

                            <button @click="open_record" class="voice_edit right"><svg t="1642646721043" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1401"
                                    width="200" height="200">
                                    <path
                                        d="M512 659.2c-115.2 0-209.066667-93.866667-211.2-211.2v-194.133333C300.8 138.666667 394.666667 42.666667 512 42.666667s211.2 93.866667 211.2 211.2V448c-2.133333 115.2-96 209.066667-211.2 211.2z m0-550.4c-81.066667 0-147.2 66.133333-147.2 145.066667V448c0 81.066667 66.133333 145.066667 147.2 145.066667 81.066667 0 145.066667-66.133333 145.066667-145.066667v-194.133333c0-81.066667-64-145.066667-145.066667-145.066667z"
                                        p-id="1402" fill="#515151"></path>
                                    <path
                                        d="M512 806.4c-187.733333 0-347.733333-134.4-379.733333-320-2.133333-17.066667 8.533333-34.133333 25.6-38.4s34.133333 8.533333 38.4 25.6c29.866667 174.933333 194.133333 292.266667 369.066666 262.4 134.4-23.466667 241.066667-128 262.4-262.4 2.133333-17.066667 19.2-29.866667 36.266667-27.733333 17.066667 2.133333 29.866667 19.2 27.733333 36.266666-29.866667 189.866667-192 326.4-379.733333 324.266667z"
                                        p-id="1403" fill="#515151"></path>
                                    <path
                                        d="M512 972.8c-17.066667 0-32-14.933333-32-32v-149.333333c0-17.066667 14.933333-32 32-32s32 14.933333 32 32v149.333333c0 17.066667-14.933333 32-32 32z"
                                        p-id="1404" fill="#515151"></path>
                                    <path
                                        d="M672 979.2h-320c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h320c17.066667 0 32 14.933333 32 32 0 19.2-14.933333 32-32 32z"
                                        p-id="1405" fill="#515151"></path>
                                </svg></button>


                        </div>
                    </div>

                    <!-- <div class="voice-letter">
                        <div class="right-voice">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-play-circle-fill" viewBox="0 0 16 16">
                                <path
                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z" />
                            </svg>
                        </div>
                        <div class="left-text">
                            <p class="voice-title">第一封情书</p>
                            <p class="voice-script">一个灵魂的自我独白</p>
                        </div>
                    </div> -->
                    <div class="letter-paper"><textarea spellcheck="false" @click="control_ent" id="card_text"
                            class="paper-text card-text" rows="6" placeholder="卡片内容"></textarea><textarea
                            spellcheck="false" @click="control_ent" id="paper_text" class="paper-text"
                            :rows="paper_rows" v-model="letter_text" placeholder="信件内容"></textarea><textarea
                            spellcheck="false" @click="control_ent" id="paper_text_right" class="paper-text-right"
                            :rows="paper_right_rows" v-model="letter_right_text" placeholder="寄件人：***
                            20**年**月**日"></textarea>
                        <div class="shitou"></div>
                    </div>
                </section>
            </section>

        </section>
    </section>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        new Vue({
            el: "#root",
            data: {
                letter_text: "",
                paper_rows: 3,
                letter_right_text: "",
                paper_right_rows: 2,
                controlDom: null,
                pre_text: "",
                voice_src: "",

            },
            watch: {
                letter_text() {
                    paper_scroll = document.getElementById("paper_text").scrollHeight
                    rows = parseInt(paper_scroll / 24)
                    console.log(paper_scroll)
                    if (rows > this.paper_rows) {
                        this.paper_rows = rows
                    }
                    // 转换成预览文字
                    // this.pre_text = document.getElementById("paper_text").value.replace(/\n/g, "<br/>").replace(/ /g, "&nbsp;")
                },
                letter_right_text() {
                    paper_scroll = document.getElementById("paper_text_right").scrollHeight
                    rows = parseInt(paper_scroll / 24)
                    if (rows > 2) {
                        console.log(rows)
                        this.paper_right_rows = rows
                    }
                },
            },
            methods: {
                retract(element) {
                    if (this.controlDom) {
                        
                            index = this.controlDom.selectionStart
                            paper_text = this.controlDom
                            paper_text_value = paper_text.value
                            paper_text.value = paper_text.value.substring(0, index) + "        " + paper_text.value.substring(index)
                            this.controlDom.selectionStart = index + 8
                            this.controlDom.selectionEnd = index + 8
                            if (this.controlDom.id == "paper_text") {
                                this.letter_text = paper_text.value
                            }
                            paper_text.focus()
                        
                    }

                },
                control_ent(ele) {
                    this.controlDom = ele.target
                },
                small(ele) {
                    // 插入小文字i
                    if (this.controlDom) {
                        
                            index = this.controlDom.selectionStart
                            paper_text = this.controlDom
                            paper_text_value = paper_text.value
                            paper_text.value = paper_text.value.substring(0, index) + "\n\n<small>  </small>\n\n" + paper_text.value.substring(index)
                            this.controlDom.selectionStart = index + 9
                            this.controlDom.selectionEnd = index + 9
                            if (this.controlDom.id == "paper_text") {
                            this.letter_text = paper_text.value
                        }
                            paper_text.focus()
                        
                    }

                },
                getImg(ele) {
                    if (this.controlDom) {
                        if (this.controlDom.id == "paper_text") {
                            // 插入图片
                            index = this.controlDom.selectionStart
                            paper_text = this.controlDom
                            paper_text_value = paper_text.value
                            in_value = "\n<img src='" + ele.target.value + "'></img>\n"
                            paper_text.value = paper_text.value.substring(0, index) + in_value + paper_text.value.substring(index)
                            this.letter_text = paper_text.value
                            console.log(this.letter_text)
                            this.controlDom.selectionStart = index + in_value.length
                            this.controlDom.selectionEnd = this.controlDom.selectionStart
                            paper_text.focus()
                        } else {
                            console.log("选择插入的位置")
                        }
                    }
                },
                close_record(ele) {
                    const recordBox = document.querySelector(".voice-box")
                    recordBox.style.display = "none"
                    document.querySelector(".letter-paper").style.minHeight = "300%"
                },
                open_record(ele) {
                    const recordBox = document.querySelector(".voice-box")
                    recordBox.style.display = "inline-block"
                    document.querySelector(".letter-paper").style.minHeight = "calc(100% - 40px)"
                },
                end_record(ele) {
                    const record_file = document.querySelector(".audio-player").src

                    const voice_file = document.querySelector(".voice_file").value
                    if (record_file.indexOf("blob") != -1) {
                        alert("将上传录音文件")
                        const recordBox = document.querySelector(".voice-box")
                        recordBox.style.display = "none"
                        this.voice_src = record_file
                        document.querySelector(".letter-paper").style.minHeight = "300%"
                    } else if (voice_file) {
                        alert("将上传本地音频")
                        const recordBox = document.querySelector(".voice-box")
                        recordBox.style.display = "none"
                        document.querySelector(".letter-paper").style.minHeight = "300%"
                    }


                },
                back() {
                    history.go(-1)
                }
            },
        })
    </script>
    <script src='{% static "front/js/record.js" %}'></script>
</body>

</html>